1주차
-
01
디자인 시스템이란?
- 디자인 시스템이 필요한 이유
- 디자인 시스템의 구성 요소, 아토믹 디자인
-
02
디자인 시스템 사례
- Google Material
- Line Design system
- Carbon System
-
03
디자인 시스템 구축을 위한 툴, 피그마 이해하기
- 피그마의 주요 기능
- 커뮤니티 & 플러그인 소개
- 피그마 커뮤니티
- 아이콘 컴포넌트 만들기
-
04
Primary Color와 GrayScale 추가해보기
2주차
-
01
디자인 가이드
- 디자인 원칙 세우기
-
02
Core Foundation 구성
- Layout / Breakpoint
- Typography
- Color token
- Icon
- Elevation
-
03
Pretendard font에 대해 알아보고 경험하기
-
04
Typography 구성에 대해 알아보고 경험하기
3주차
-
01
피그마의 Variants 기능에 대해 알아보기
-
02
피그마의 Auto-layout 기능에 대해 알아보기
-
03
Components 만들기
- 버튼 종류와 상태에 대해 알아보기
- 버튼 시스템 화
- 텍스트 필드 종류와 상태에 대해 알아보기
- 텍스트 필드 시스템 화
4주차
-
01
Molecule를 구성하고 Variants 추가하기
-
02
Organism를 구성하고 Variants 추가하기
-
03
시스템을 활용한 주요 화면 GUI 만들기